<template>
  <div id="member-product-collect-list-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-35-this.getSafeArea().top)+'px',
    paddingTop:(this.getSafeArea().top+35)+'px'
  }">
    <div class="page-title" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.push('/MemberHome')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>商品收藏</span>
    </div>

      <i-scroller-box id="product-list" ref="i-scroller-box"
                      url="Member/getProductCollectList"
                      :height="getWinSize().height-40-this.getSafeArea().top-10"
                      :style="{
       width:'100%',
                    }">
        <template v-slot:list-item="{index,data}">
          <product-list-item :show-type="3" :key="index" :curr-product="{
            id:data.productId,
            name:data.productName,
            image:data.productImage,
            price:data.productPrice,
          }" :change-call-back="getList"/>
        </template>
      </i-scroller-box>
  </div>
</template>

<script>
import ShopListItem from '../common/ShopListItem'
import ProductListItem from '../common/ProductListItem'
import IScrollerBox from '../common/IScrollerBox'

export default {
  name: 'MemberProductCollectList',
  components: {IScrollerBox, ProductListItem, ShopListItem},
  data: function () {
    return {
      productList: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList: function () {
      var form = {}
      form.sortProp = 'id'
      form.sortOrder = 'DESC'
      this.$refs['i-scroller-box'].getList({form})
    }
  }
}
</script>

<style scoped>

</style>
